<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <span>{{message}}</span>
      <span v-if="ifa">a</span>
      <span v-if="ifb">b</span>
      <span v-if="ifc">c</span>
      <span v-if="ifd">d</span>
      <ul>
          <li v-for="a in arraya">{{a}}</li>
      </ul>
      <ul>
          <li v-for="b in arrayb">id是{{b.id}，name是{{b.name}}}</li>
      </ul>

  </div>
</body>
<!--引入vuejs框架-->
<script src="../js/vue.js"></script>
<script>
    let app=new Vue({
        el:"#app",//和最顶级的 dom id要一致
        //最顶级的dom，内部的内容，使用vue框架支持的变量/方法
        data:{
            message:"hello",
            ifa:true,
            ifb:false,//不展示 b
            ifc:"abc",
            ifd:"",   //不展示 d
         arraya:[1 ,5,9],
         arrayb:[
             {
                 id:1, name:"???",
             },{
                id:2, name:"123",
    },
    ],},
    });
</script>
</html>